:root {
  --primary-color: #31c27c;
  /* 定义一个全局的主色变量 */
}

body {
  margin: 0;
  /* 清除默认边距 */
  background: #f5f5f5;
  /* 设置页面背景色 */
  font-family: Microsoft Yahei;
  /* 设置字体 */
  font-size: 14px;
  /* 设置基本字体大小 */
  /* min-width: 1000px; */
  /* 可选，设置最小宽度 */
}

a {
  text-decoration: none;
  /* 去掉链接下划线 */
  color: #000;
  /* 设置链接颜色为黑色 */
}

header {
  height: 90px;
  /* 设置头部高度 */
  background: white;
  /* 设置头部背景色 */
  display: flex;
  /* 使用 flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐内容 */
}

.header-inner,
main {
  /* width: 1200px; */
  /* 可选，设置宽度 */
  padding: 20px;
  /* 设置内边距 */
  margin: auto;
  /* 自动左右边距以居中对齐 */
}

.tag-list {
  margin-top: 50px;
  /* 设置顶部外边距 */
  margin-bottom: 15px;
  /* 设置底部外边距 */
}

.tag-item {
  display: inline-block;
  /* 使标签项目水平排列 */
  padding: 0 8px;
  /* 设置水平内边距 */
  margin-right: 24px;
  /* 设置右边距 */
  line-height: 26px;
  /* 设置行高 */
  color: #000;
  /* 标签颜色为黑色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.tag-active {
  background: var(--primary-color);
  /* 活动标签背景色为主色 */
  color: white;
  /* 活动标签文字颜色为白色 */
}

.tag-item:not(.tag-active):hover {
  color: var(--primary-color);
  /* 非活动标签悬停时变为主色 */
}

.nowrap {
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏溢出文本 */
  text-overflow: ellipsis;
  /* 溢出文本显示省略号 */
}

.playlist {
  display: grid;
  /* 使用网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 动态列布局 */
  gap: 45px 15px;
  /* 设置行间距和列间距 */
  margin-bottom: 45px;
  /* 设置底部外边距 */
}

.cover-wrap {
  display: flex;
  /* 使用 flexbox 布局 */
  position: relative;
  /* 相对定位以支持绝对定位的子元素 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  width: 100%;
  /* 设置宽度为100% */
  margin-bottom: 15px;
  /* 设置底部外边距 */
  align-items: center;
  /* 垂直居中对齐内容 */
  justify-content: center;
  /* 水平居中对齐内容 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击 */
}

.cover-img {
  width: 100%;
  /* 设置图片宽度为100% */
  transition: all 0.75s;
  /* 设置所有属性的过渡效果 */
}

.cover-mask {
  position: absolute;
  /* 绝对定位覆盖图片 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  /* 设置遮罩背景为黑色 */
  opacity: 0;
  /* 初始透明度为0 */
  transition: all 0.5s;
  /* 设置透明度变化的过渡效果 */
}

.cover-play {
  position: absolute;
  /* 绝对定位播放按钮 */
  left: 50%;
  top: 50%;
  margin-left: -35px;
  /* 向左偏移以居中对齐 */
  margin-top: -35px;
  /* 向上偏移以居中对齐 */
  opacity: 0;
  /* 初始透明度为0 */
  transform: scale(0.7);
  /* 初始缩放为0.7 */
  transition: all 0.5s;
  /* 设置变化的过渡效果 */
}

.cover-wrap:hover .cover-mask {
  opacity: 0.2;
  /* 鼠标悬停时遮罩变为20%透明 */
}

.cover-wrap:hover .cover-play {
  opacity: 1;
  /* 鼠标悬停时播放按钮变为完全可见 */
  transform: scale(1);
  /* 鼠标悬停时播放按钮恢复原始大小 */
}

.cover-wrap:hover .cover-img {
  transform: scale(1.07);
  /* 鼠标悬停时图片略微放大 */
}

.album-title:hover {
  color: var(--primary-color);
  /* 专辑标题悬停时变为主色 */
}

.album-author {
  color: #999;
  /* 专辑作者颜色为灰色 */
  line-height: 1.6;
  /* 设置行高 */
}

.album-author:hover {
  color: var(--primary-color);
  /* 专辑作者悬停时变为主色 */
}

.album-time {
  color: #999;
  /* 专辑时间颜色为灰色 */
}

.page {
  display: flex;
  /* 使用 flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐内容 */
  justify-content: center;
  /* 水平居中对齐内容 */
}

.page-item {
  display: inline-block;
  /* 使分页项目水平排列 */
  color: #a2a2a2;
  /* 分页项颜色为灰色 */
  line-height: 50px;
  /* 设置行高 */
  padding: 0 20px;
  /* 设置水平内边距 */
  margin: 10px;
  /* 设置外边距 */
  font-size: 16px;
  /* 设置字体大小 */
}

.page-current,
.page-item:not(.page-more):hover {
  background: var(--primary-color);
  /* 当前页和悬停的分页项背景色为主色 */
  color: white;
  /* 当前页和悬停的分页项文字颜色为白色 */
}

footer {
  margin-top: 60px;
  /* 设置顶部外边距 */
  background: #333;
  /* 设置底部背景色为深灰 */
  height: 200px;
  /* 设置底部高度 */
}